<template>
  <a-spin :spinning="spinning">
    <div>
      <tableTplList
        ref="tableTplList"
        :defPanelWidth="100"
        :table-id="tableId"
        :table-echart-id="tableEchartId"
        :table-event="tableEvent"
        :table-obj-param="tableObjParam"
        :ui-page-url="uiPageUrl"
        :init-src-label="initSrcLabel"
        @triggerFooterToolbarData="triggerFooterToolbarData"
        @tableChangeEvent="tableChangeEvent"
        @uiChangeEvent="uiChangeEvent"
        @openTableLoad="openTableLoad"
        @openTableDownLoad="openTableDownLoad"
        @openTableMenuLoad="openTableMenuLoad"
        @openTableMenuSelect="openTableMenuSelect"
        @openGeneralModal="openGeneralModal"
        @btnClickEvent="btnClickEvent"
        @openImportFileDataToDBModal="openImportFileDataToDBModal"
        @processCustomRowOnClick="processCustomRowOnClick"
      />
      <!-- table区域-end -->
      <formTplModalTemplate ref="formTplModal" name="formTplModal" @reloadLoadData="reloadLoadData" />
      <uiModalTemplate ref="uiModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
      <listAndListModalTemplate ref="listAndListModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
      <treeAndListModalTemplate ref="treeAndListModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
      <treeNodeModalTemplate ref="treeNodeModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
      <stepsModalTemplate ref="stepsModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
      <echartUiModalTemplate ref="echartModal" @returnQuickSelectRows="returnQuickSelectRows" @returnBtnClickEvent="returnBtnClickEvent" />
    </div>
  </a-spin>
  <!--</a-card>-->
</template>
<script>
import { loadUIMethod, getQuickSubmitRemoteData, triggerRefOpenReturn ,loadInitAppUIDataMethod} from '@/utils/auth'
import { getFnInputParam } from '@/utils/hyurl'
import { changePanelElUiVal } from '@/utils/hypanel'
import { getInitLoadUiPageUrlDataParam, openLoadGeneralModal, getChangeInitSrcObj } from '@/utils/hyopen'
import { fetchExportData, fetchExportFtpData } from '@/utils/hyexport'
import tableTplList from './tableTplList'
import { getTplKeyObj } from '@/utils/hyctr'
import { btnImport } from '@/utils/hyupload'
import { getCheckRecordKeyStr, getQuickSetLocalListData } from '../../../../utils/hyrecord'
export default {
  name: 'Ui',
  components: {
    // treeTplList
    tableTplList,
    formTplModalTemplate: () => import('./formTplModal.vue'),
    uiModalTemplate: () => import('./uiModal.vue'),
    listAndListModalTemplate: () => import('./listAndListModal.vue'),
    treeAndListModalTemplate: () => import('./treeAndListModal.vue'),
    treeNodeModalTemplate: () => import('./treeNodeModal.vue'),
    stepsModalTemplate: () => import('./stepsModal.vue'),
    echartUiModalTemplate: () => import('./echartUiModal.vue')
  },
  props: ['S_PAGE_ID', 'S_PAGE_VER', 'S_PARTITION', 'pageUrlData', 'selectType'],
  data() {
    return {
      globalData: {},
      triggerOpenParam: {},
      initSrcObj: { initSrcUrl: '', initSrcLabel: '' },
      initLoadObj: { loadFormId: '', loadBtnId: '', loadListId: '' },
      uiParamData: {},
      initReturnSetFormData: {},
      initReturnSetListData: {},
      tableSelectedRow: [],
      initOpenData: {},
      title: '',
      initSrcLabel: 'page',
      uidata: {}, // 初始化全部UI数据
      showTableTplKey: 'tableTplList',
      showTableNowKey: null,
      accept: '',
      tableId: 'tableTplList',
      tableEchartId: 'tableEchartId',
      spinning: true,
      tableObjParam: { rowOnClick: false, rowOnDblClick: true, defalutSearchQuery: 'searchQuery', showEchart: true },
      parentRefOpen: {},
      openParam: {},
      localParam: {},
      uiPageUrl: {},
      tableExtProp: {},
      tableEvent: { update: 'openTableMenuUpdate', delete: 'openTableMenuDelete', insert: 'openTableMenuInsert',
        select: 'openTableMenuSelect', copy: 'openTableMenuCopy', detail: 'openTableMenuDetail',
        selectNode: 'openTableMenuSelectNode', load: 'openTableLoad', menuLoad: 'openTableMenuLoad',
        defalutSearchQuery: 'searchQuery',
        tableModal: 'openTableModal', menuModal: 'openTableMenuModal', generalModal: 'openGeneralModal', impModal: 'openImportFileDataToDBModal',
        setData: 'openSetDataTableModal', saveSearchForm: 'saveTableSearchForm',
        rowOnClick: 'processCustomRowOnClick', rowOnDblClick: 'processCustomRowOnDblClick' },
      formTplModal: 'formTplModal',
      searchFormParam: {},
      nowRow: {},
      loading: false,
      nowBtnItem: {},
      // 表头
      columns: [],
      dealApi: {
        page: { S_PAGE_ID: '', S_PAGE_VER: '' }
      },
      dealParam: {
        page: { S_DY_PARAM: [] }
      }
    }
  },
  /**    **/
  computed: {
  },
  watch: {
  },
  mounted() {
    // window.addEventListener('resize', this.resizeTest)
    if (this.pageUrlData !== undefined) {
      this.initSrcObj = this.pageUrlData.initSrcObj
    }
    this.clientWidth = document.body.clientWidth
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
    })
  },
  beforeRouteUpdate(to, from, next) {
    next(vm => {
      vm.initUI()
    })
  },
  beforeRouteLeave(to, from, next) {
    next()
  },
  created() {
    const _this = this
    this.openParam = Object.assign({}, this.openParam, this.$route.query)
    _this.initUI()
  },
  methods: {
    triggerFooterToolbarData(footerData) {
      this.$emit('triggerFooterToolbarData', footerData)
    },
    initUI() {
      const _this = this
      const param = getInitLoadUiPageUrlDataParam(_this)
      console.log('init ui', param, this.initSrcObj, _this.openParam)
      _this.spinning = true
      _this.loading = true
      loadUIMethod(param).then((res) => {
        if (!res.data.success) {
          _this.$message.error(res.data.message)
          _this.spinning = false
          return
        }
        if (res.data === null) {
          _this.spinning = false
          return
        }
        const uiData = res.data.data
        _this.initAppUI(param, uiData)
      })
    },
    initAppUI(parameter, uiData) {
      const _this = this
      parameter.app = uiData.app
      loadInitAppUIDataMethod(parameter).then((res) => {
        const appUIData = res.data.data
        uiData.appData = appUIData.appData
        uiData.sessionData = appUIData.sessionData
        _this.$emit('triggerUiData', uiData)
        _this.initTableUi(uiData)
        _this.$nextTick(() => {
          _this.changeTableUi(_this.showTableTplKey, _this.openParam)
          _this.spinning = false
          _this.loading = false
        })
      })
    },
    initClearUi() {
      const thisObj = this
      thisObj.showTableNowKey = null
      thisObj.uidata = Object.assign({}, {})
    },
    initTableUi(data) {
      const thisObj = this
      thisObj.showTableNowKey = null
      thisObj.uidata = Object.assign({}, data)
    },
    changeTableUi(tplKey, param, newInitSrcObj) {
      const thisObj = this
      const panelEl = changePanelElUiVal(thisObj.uidata, tplKey, param)
      if (panelEl !== null) {
        const showKey = panelEl.dataKey
        const tplGlobalData = {}
        tplGlobalData.globalParam = param
        tplGlobalData.openParam = param
        const newParam = getFnInputParam(thisObj, tplGlobalData, panelEl.refSetVal)
        // thisObj.localParam = Object.assign({}, newParam)
        const initSrcPanelElObj = getChangeInitSrcObj(thisObj, panelEl, newInitSrcObj)
        console.log('changeTableUi newParam', newParam, panelEl,newInitSrcObj, initSrcPanelElObj)
        thisObj.changeTableUiKey(tplKey, showKey, newParam, initSrcPanelElObj)
      }
    },
    changeTableUiKey(tplKey, showKey, param, initSrcObj) {
      // 做一个面板里面多个table数据切换
      const thisObj = this
      thisObj.loading = true
      if (thisObj.showTableNowKey !== showKey) {
        thisObj.showTableNowKey = showKey
        const initUiVal = thisObj.uidata[showKey]
        if (thisObj.uidata.appData !== undefined && thisObj.uidata.appData[showKey] !== undefined) {
          // 应用配置数据
          initUiVal.appData = thisObj.uidata.appData[showKey]
        }
        if (thisObj.uidata.sessionData !== undefined && thisObj.uidata.sessionData[showKey] !== undefined) {
          // 个人配置数据
          initUiVal.sessionData = thisObj.uidata.sessionData[showKey]
        }
        if (initUiVal !== null) {
          thisObj.$refs[tplKey].initUI(initUiVal, param, initSrcObj)
          thisObj.$refs[tplKey].otherCompSetValOpenParam(null, param, initSrcObj)
        } else {
          thisObj.$refs[tplKey].otherCompSetValOpenParam(null, param, initSrcObj)
        }
      }
      thisObj.loading = false
    },
    tableChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      const thisObj = this
      console.log('表格变化统一formItem.', formItem)
      console.log('表格变化统一事件接口.', triggerObj)
      console.log('表格变化统一事件接口 localParamDataSet.', localParamDataSet)
      console.log('表格变化统一事件接口 selectedRow.', selectedRow)
      // const changeOpenParam = this.openParam
      // changeOpenParam 做入参适配
      const changeOpenParam = localParamDataSet
      thisObj.tableChangeEventControlObj(formItem, triggerObj, changeOpenParam)
    },
    tableChangeEventControlObj(formItem, triggerObj, changeOpenParam) {
      const thisObj = this
      const I_TRIGGER_OBJ = triggerObj.i_TRIGGER_OBJ
      if (I_TRIGGER_OBJ === 7) {
        // 执行面板呈现规则
        thisObj.showTableIdKey = triggerObj.showKey
        thisObj.changeTableUi(thisObj.showTableIdKey, changeOpenParam)
      } else {
        console.log('表格变化统一控制事件接口.', triggerObj)
      }
    },
    uiChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      console.log('ui change event...', triggerObj)
    },
    searchList() {
    },
    searchPage() {
    },
    initReplaceDefVal() {
      const str = '<div> <p> {$no}</p>$no <p> {$title}</p> </div>'
      // 1. 创建正则实例
      let re = /(?<=\{)(\$\w+)(?=\})/g
      re = /(?<=)(\$\w+)(?=)/g
      // 2. 构建替换对象
      const o = { 'no': 5, 'title': 'jack', 'dfd': 'ddd' }
      // 3.执行替换
      const res = str.replace(re, m => o[m.substr(1)])
      // 4.测试
      console.log(str)
      console.log(res)
    },
    openImportFileDataToDBModal(btnItem, record, parentDealApi) {

      // this.$refs.importFileDataToDBModal.show(btnItem,record,parentDealApi);
    },
    returnImportFileDataToDBRows() {

    },
    test() {
      console.log('test..........................')
      // this.$refs.tableTplList.queryEchartsData()
      // this.$refs.tableTplList.getSessionHourGroupList()
    },
    testDay() {
      console.log('test..........天................')
      this.$refs.tableTplList.getSessionDayGroupList()
    },
    testMonth() {
      console.log('test.............月.............')
      this.$refs.tableTplList.getSessionMonthGroupList()
    },
    setSearchForm() {
      const _this = this
      _this.form.setFieldsValue(this.searchFormParam)
    },

    openTableSearch(btnItem, record) {
      this.nowBtnItem = btnItem
      const selectedRecord = Object.assign({}, record)
      this.treeCleanChildrenNode(selectedRecord)
      console.log('openTableSearch', record)
      this.$refs.tableTplList.tableQueryByParam(selectedRecord)
    },
    // openTableMenuDelete(btnItem, record) {
    //   this.nowBtnItem = btnItem
    //   console.log('openTableMenuDelete', record)
    // },
    btnClickEvent(btnItem, record) {
      this.nowBtnItem = btnItem
      if (btnItem.fnType === 98) {
        this.$emit('btnClickEvent', btnItem, record)
      } else if (btnItem.fnType === 9) {
        let param = {}
        if (undefined !== record) {
          param = Object.assign({}, record)
        }
        console.log('FTP 上报', btnItem.refExport)
        const refExport = btnItem.refExport
        param.refExportUrlKey = refExport.refExportUrlKey
        param.refExportPkId = refExport.refExportPkId
        param.viewKey = refExport.viewKey
        refExport.I_EXPORT_OBJ = 2
        refExport.pushDynamicKey = 'pushDynamicKey'
        const thisObj = this.$refs[this.tableId]
        fetchExportFtpData(thisObj, param.refExportUrlKey, param, refExport)
      } else if (btnItem.fnType === 10) {
        // const thisObj = this
        // let param = {}
        // if (undefined !== record) {
        //   param = Object.assign({}, record)
        // }
        console.log('FTP 下载', btnItem.refImport)
        // const refImport = btnItem.refImport
        // param.refImportUrlKey = refImport.refImportUrlKey
        // param.refImportPkId = refImport.refImportPkId
        // param.viewKey = refImport.viewKey
        const thisObj = this.$refs[this.tableId]
        // fetchExportFtpData(thisObj, param.refExportUrlKey, param, refImport)

        btnImport(thisObj, btnItem)
      } else if (btnItem.fnType === 23) {
        const bpmEditorModal = this.$refs['bpmEditorModal']
        bpmEditorModal.visible = true
        // const thisObj = this.$refs[this.tableId]
        // const refOpenObj = getRefOpenObj(thisObj, btnItem, thisObj.globalData)
        // const routeUrl = refOpenObj.routeUrl // '/system/ui/ui/32/1088338001950/v0.02'
        // const routeQuery = refOpenObj.routeQuery
        // this.$router.push({
        //   path: routeUrl,
        //   query: routeQuery
        // })
      }
    },
    openGeneralModal(btnItem, globalData) {
      openLoadGeneralModal(btnItem, globalData, this)
    },
    processCustomRowOnClick(globalData) {
      this.globalData[this.showTableTplKey] = globalData
      this.$emit('openTableMenuSelect', this.globalData)
      // this.nowRow = globalData
    },
    processCustomRowOnDblClick(globalData) {
      this.globalData[this.showTableTplKey] = globalData
      this.$emit('openTableMenuSelect', this.globalData)
    },
    openTableMenuSelect(globalData) {
      this.globalData[this.showTableTplKey] = globalData
      this.$emit('openTableMenuSelect', this.globalData)
    },
    getTableId() {
      return this.showTableTplKey
    },
    reloadLoadData(openBtnItem, returnData, modalKey, modalForm) {
      const key = 'tableTplList'
      this.$refs[key].reloadLoadData()
    },
    openTableLoad(record, modalKey) {
      const key = this.nowBtnItem.tableId
      const selectedRecord = Object.assign({}, record)
      this.$refs[key].tableQueryByParam(selectedRecord)
    },
    openTableMenuLoad(btnItem, record) {
      console.log('openTableMenuLoad', record)
      this.openTableDownLoad(record)
    },
    openTableDownLoadTemplate(btnItem, record) {
      console.log('下载模版', btnItem)
      console.log('下载模版记录', record)
    },

    openTableDownLoad(btnItem, record) {
      console.log('下载', btnItem)
      let param = {}
      if (undefined !== record) {
        param = Object.assign({}, record)
      }
      console.log('加载openTableMenuLoad', btnItem.refExport)
      const refExport = btnItem.refExport
      param.refExportUrlKey = refExport.refExportUrlKey
      param.refExportPkId = refExport.refExportPkId
      param.viewKey = refExport.viewKey
      const thisObj = this.$refs[this.tableId]
      fetchExportData(thisObj, param.refExportUrlKey, param, refExport)
    },
    returnBtnClickEvent(btnItem, globalData) {
      // 模态窗口
      this.$refs[this.showTableTplKey].tableOperatorBtnOnClick(btnItem)
    },
    returnQuickSelectRows(selectRows, formItem) {
      const thisObj = this
      triggerRefOpenReturn(selectRows, formItem, thisObj)
    },
    returnQuickSetLocalFormData(selectionRows, formItem) {
      const thisObj = this
      const tableId = this.showTableTplKey
      const tplObj = getTplKeyObj(thisObj, tableId)
      const checkObj = getCheckRecordKeyStr(selectionRows)
      tplObj.setTableSearchForm(checkObj)
    },
    returnQuickSetLocalListData(selectionRows, formItem) {
      const _thisObj = this
      // 设置本地临时列表数据
      getQuickSetLocalListData(selectionRows, formItem, _thisObj)
    },
    returnQuickSubmitRemoteData(selectionRows, formItem) {
      if (selectionRows.length !== 0) {
        const tableId = this.showTableTplKey
        // 设置提交远程列表数据
        // const extendParam = Object.assign({}, this.$refs[this.showTableTplKey].formModel, this.openParam, this.localParam, this.nowRow, this.uiPageUrl)
        const tmpGlobalData = this.$refs[tableId].globalData
        getQuickSubmitRemoteData(selectionRows, tmpGlobalData, formItem, this)
      }
    }
  }
}
</script>
